<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <section class="todoapp">
    <header class="header">
      <h1>待办事项</h1>
      <input id="addTodo" class="new-todo" placeholder="需要做什么?" autofocus>
    </header>
    <section class="main">
      <input id="toggleAll" class="toggle-all" type="checkbox">
      <label for="toggleAll"></label>
      <ul class="todo-list" id="todoList"></ul>
    </section>
  </section>

  <script src="./js/jquery-3.6.0.js"></script>
  <script>

    // 分析:
    // 1. 注册键盘事件(给输入框注册键盘事件)
    // ☞ 在键盘事件中创建元素 (判断用户按下是不是回车键)
    // ☞ 在类名叫 todo-list 标签中创建 li标签
    // ☞ 在li标签中创建一个 类名叫 view 的div标签
    // ☞ 在div标签中创建一个复选框标签,类名叫 toggle
    // ☞ 在div标签中创建一个label标签(显示用户输入内容)
    // ☞ 在div标签中创建一个类名叫destroy的button标签
    // ☞ 在li中创建一个和div并列显示的类名叫edit的输入框标签
    // 键盘事件
    $('.new-todo').keydown(function (e) {
      if (e.keyCode == 13) {
        // 用户按下的是回车键
        // 获取用户输入的内容
        let v = $(this).val();
        //a)创建li标签
        let li = $(`
                    <li>
                        <div class="view"> 
                            <input type="checkbox" class="toggle">
                            <label>${v}</label>
                            <button class="destroy"></button>
                        </div>
                        <input type="text" class="edit">
                    </li>
                  `);
        // b) 将创建好的标签添加到对应的列表中
        $('.todo-list').prepend(li);
        // c) 将输入框中的内容清空
        $(this).val("");
      }
    });


    //删除功能: 委托方式实现
    $('.todo-list').on('click', '.destroy', function () {
      $(this).parents('li').fadeOut('fast', 'linear', function () {
        // 移除当前元素
        $(this).parents('li').remove();
      })
    });


    // 点击复选框功能: 给li标签切换 completed 类名
    $('.todo-list').on('click', '.toggle', function () {
      $(this).parents('li').toggleClass('completed');
    })

    // 双击功能: dblclick, 通过委托方式注册双击事件
    $('.todo-list').on('dblclick', 'li', function () {
      // 给当前li标签设置类名 editing , 显示输入框
      $(this).addClass('editing');
      // 将label标签中的文字取出
      let v = $(this).find('label').html()
      // 将取出文字赋值给input标签
      $(this).children('input').val(v);
    })

    // 失去焦点功能: 给输入框注册一个blur事件
    $('.todo-list').on('blur', '.edit', function () {
      // 先将输入框隐藏
      $(this).parent().removeClass('editing');
      // 获取输入框中的内容
      let v = $(this).val();
      // 将输入框的内容赋值给label标签
      $(this).siblings().find('label').html(v);
    })
  </script>
</body>

</html>